﻿<template>
  <div class="app-container">
    <basic-container>
      <avue-form ref="form" v-model="obj" :option="option">
        <template slot-scope="scope" slot="menuForm">
          <el-button type="primary" @click="isAdd?rowSave():rowUpdate()">{{isBtnText}}</el-button>
          <el-button type="primary" @click="breaks">返回</el-button>
        </template>
        <template slot-scope="scope" slot="map">
          <el-button @click="box=true" :disabled="textDisabled" style="width:100%">{{textTitle}}</el-button>
        </template>
      </avue-form>
    </basic-container>
    <el-dialog fullscreen width="100%" title="选择坐标" @close="mapClose" :visible.sync="box">
      <div class="map" v-if="box">
        <el-input class="map__input" id="map__input" size="small" v-model="mapText" clearable placeholder="输入关键字选取地点"></el-input>
        <div class="map__box">
          <div id="container" class="map__container" tabindex="0"></div>
          <div id="map__result" class="map__result"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { validatenull } from '@/util/validate'
import { addObj, getById, getImg } from '@/api/hotelManage/hotelManage'
const DIC = {
  flag: [
    {
      label: '显示',
      value: 0
    },
    {
      label: '隐藏',
      value: 1
    }
  ]
}
const baseUrl = `https://cli2.avue.top/api/area`
export default {
  data() {
    return {
      zhanshitpid: '',
      obj: {},
      box: false,
      first: true,
      poi: {},
      mapText: '',
      DIC: []
    }
  },
  created() {
    const query = this.$route.query
    this.obj.szdqsheng = query.szdqsheng
    this.obj.szdqshi = query.szdqshi
    this.getObj()
  },
  watch: {
    box() {
      if (this.box) {
        setTimeout(() => {
          this.init()
        }, 0)
      }
    }
  },
  computed: {
    textDisabled() {
      return validatenull(this.obj.szdqshi)
    },
    textTitle() {
      return validatenull(this.obj.jiudianjd)
        ? this.textDisabled ? '请先选择地区' : '选择坐标'
        : '重新选择'
    },
    isBtnText() {
      return this.isAdd ? '新增' : '修改'
    },
    isAdd() {
      return !this.$route.params.id
    },
    option() {
      return {
        dicData: DIC,
        submitText: '提交',
        formWidth: '60%',
        labelWidth: '100',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '排序',
            prop: 'vipdj',
            placeholder: '数字越大排名越高',
            span: 20
          },
          {
            label: '酒店名称',
            prop: 'jdmc',
            span: 20
          },
          {
            label: '消费赠送积分',
            prop: 'xfzsjf',
            placeholder: '注意：消费一元所赠送的积分',
            span: 20
          },
          {
            label: '酒店核销密码',
            prop: 'jdhxmm',
            placeholder: '注意：客人入住时，输入核销密码，完成入住',
            span: 20
          },
          {
            label: '缩略图',
            prop: 'slt',
            type: 'upload',
            listType: 'picture-card',
            limit: 1,
            propsHttp: {
              name: 'url',
              url: 'url'
            },
            dataType: 'array',
            action: '/api/files',
            span: 20
          },
          {
            label: '其他图片',
            prop: 'url',
            listType: 'picture-card',
            placeholder: '批量上传图片',
            propsHttp: {
              name: 'url',
              url: 'url'
            },
            dataType: 'array',
            action: '/api/files',
            type: 'upload',
            span: 20
          },
          {
            label: '酒店电话',
            prop: 'dianhua',
            span: 20
          },
          {
            label: '所在地区',
            prop: 'szdqsheng',
            type: 'select',
            placeholder: '省/直辖市',
            span: 9,
            cascader: ['szdqshi', 'szdqxian'],
            cascaderFirst: true,
            dicUrl: `${baseUrl}/getProvince`,
            dicData: 'szdqsheng',
            props: {
              label: 'name',
              value: 'code'
            },
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          },
          {
            labelWidth: 0,
            prop: 'szdqshi',
            type: 'select',
            placeholder: '市',
            span: 6,
            dicFlag: false,
            dicUrl: `${baseUrl}/getCity/{{key}}`,
            dicData: 'szdqshi',
            props: {
              label: 'name',
              value: 'code'
            },
            rules: [
              {
                required: true,
                message: '请选择城市',
                trigger: 'blur'
              }
            ]
          },
          {
            labelWidth: 0,
            prop: 'szdqxian',
            dicFlag: false,
            type: 'select',
            placeholder: '区/县',
            span: 6,
            dicUrl: `${baseUrl}/getArea/{{key}}`,
            dicData: 'szdqxian',
            props: {
              label: 'name',
              value: 'code'
            },
            rules: [
              {
                required: true,
                message: '请选择地区',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '酒店坐标',
            prop: 'map',
            span: 9,
            formsolt: true
          },
          {
            labelWidth: 0,
            prop: 'jiudianjd',
            disabled: true,
            placeholder: '经度',
            span: 6
          },
          {
            labelWidth: 0,
            prop: 'jiudianwd',
            disabled: true,
            placeholder: '纬度',
            span: 6
          },
          {
            label: '酒店地址',
            prop: 'jddz',
            span: 20
          },
          {
            label: '酒店品牌',
            prop: 'xingji',
            span: 20
          },
          {
            label: '酒店某程价格',
            prop: 'qt1',
            span: 20
          },
          {
            label: '酒店房价',
            prop: 'qt2',
            span: 20
          },
          {
            label: '酒店商圈',
            prop: 'jiudianjs',
            type: 'textarea',
            minRows: 5,
            placeholder: '用于正文内的详情',
            span: 20
          },
          {
            label: '订房说明',
            prop: 'dfsm',
            type: 'textarea',
            minRows: 5,
            placeholder: '酒店订房说明(选填)',
            span: 20
          },
          {
            label: '位置交通',
            prop: 'wzjt',
            type: 'textarea',
            minRows: 5,
            placeholder: '酒店位置交通说明(选填)',
            span: 20
          },
          {
            label: '促销信息',
            prop: 'cxxx',
            type: 'textarea',
            minRows: 5,
            placeholder: '酒店促销信息(选填)',
            span: 20
          },
          {
            label: '状态',
            prop: 'flag',
            span: 20,
            type: 'radio',
            dicData: 'flag'
          }
        ]
      }
    }
  },
  methods: {
    mapClose() {
      this.mapText = ''
      window.poiPicker.clearSearchResults()
      this.poi = {}
    },
    submit() {
      if (validatenull(this.poi)) {
        this.$message.warning('请选择坐标')
        return
      }

      this.obj.map = ''
      this.obj.jiudianjd = this.poi.location.P
      this.obj.jiudianwd = this.poi.location.R
      this.poi = {}
      this.box = false
    },
    init() {
      this.DIC = this.$refs.form.DIC
      var map = new window.AMap.Map('container', {
        zoom: 15
      })
      const safe = this
      let city = this.DIC.city.filter(ele => ele.code === this.obj.szdqshi)[0]
      window.AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        var poiPicker = new PoiPicker({
          city: city.name,
          input: 'map__input',
          placeSearchOptions: {
            map: map,
            pageSize: 10
          },
          searchResultsContainer: 'map__result'
        })
        //初始化poiPicker
        poiPickerReady(poiPicker)
      })

      function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker
        //选取了某个POI
        poiPicker.on('poiPicked', function(poiResult) {
          var source = poiResult.source,
            poi = poiResult.item
          safe.mapText = poi.name
          safe.obj.jddz = poi.name
          safe.poi = poi
          if (source !== 'search') {
            poiPicker.searchByKeyword(poi.name)
          }
        })
      }
    },
    getObj() {
      if (!this.isAdd) {
        getById(this.$route.params.id)
          .then(res => {
            this.obj = res.data
            this.obj.slt = (res.data.slt || '').split(',')
            return getImg({
              id: '',
              zhanshitpid: res.data.zhanshitpid
            })
          })
          .then(response => {
            this.obj.url = (response.data.data[0].url || '').split(',')
            this.zhanshitpid = response.data.zhanshitpid
          })
      }
    },
    rowUpdate() {
      this.obj.slt = this.obj.slt.join(',')
      this.obj.url = this.obj.url.join(',')
      this.obj.jiudiantplists = []
      this.obj.jiudiantplists.push({
        url: this.obj.url,
        zhanshitpid: this.obj.zhanshitpid
      })
      addObj(Object.assign({}, this.obj)).then(() => {
        this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        })
        this.$router.$avueRouter.closeTag()
        this.$router.push({ path: '/hotelManage/hotel' })
      })
    },
    rowSave() {
      const date = new Date().getTime() + ''
      this.obj.slt = this.obj.slt.join(',')
      this.obj.jiudiantplists = []
      this.obj.zhanshitpid = date
      this.obj.url = this.obj.url.join(',')
      this.obj.jiudiantplists.push({
        url: this.obj.url,
        zhanshitpid: date
      })
      // this.obj.url.forEach(ele => {
      //   this.obj.jiudiantplists.push({
      //     url: ele,
      //     zhanshitpid: date
      //   });
      // });
      addObj(Object.assign({}, this.obj)).then(() => {
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        })
        this.$router.$avueRouter.closeTag()
        this.$router.push({ path: '/hotelManage/hotel' })
      })
    },
    breaks() {
      this.$router.$avueRouter.closeTag()
      this.$router.push({ path: '/hotelManage/hotel' })
    }
  }
}
</script>

<style lang="scss">
.amap_lib_placeSearch,
.amap-ui-poi-picker-sugg-container {
  border: none !important;
}

.amap_lib_placeSearch .poibox.highlight {
  background-color: #cae1ff;
}

.poi-more {
  display: none !important;
}
.map {
  &__input {
    margin-bottom: 10px;
  }
  &__box {
    position: relative;
  }
  &__container {
    width: 100%;
    height: 450px;
  }
  &__result {
    display: block !important;
    position: absolute;
    top: 0;
    right: -8px;
    width: 250px;
    height: 450px;
    overflow-y: auto;
  }
}
</style>
